<template>
<div class="index">
    <div class="main">
      <div class="left bg_white">
          <div class="nav">
              <ul id="nav">
                  <li v-bind:class="{bule:oNav[0]}" dataClass="" @click="getClassFun" index='0'>全部</li>
                  <li  v-bind:class="{bule:oNav[1]}" dataClass="设计" @click="getClassFun" index='1'>设计</li>
                  <li v-bind:class="{bule:oNav[2]}" dataClass="前端开发"  @click="getClassFun" index='2'>前端开发</li>
                  <li v-bind:class="{bule:oNav[3]}" dataClass ="后端开发"  @click="getClassFun" index='3'>后端开发</li>
                  <li v-bind:class="{bule:oNav[4]}" dataClass ="产品设计"  @click="getClassFun" index='4'>产品设计</li>
                  <li v-bind:class="{bule:oNav[5]}" dataClass ="工具资源" @click="getClassFun" index='5'>工具资源</li>
                  <!-- <li class="btn"><button>写文章</button></li> -->
              </ul>
          </div>
          <div class="article_list clearfloat" v-for="(item,index) in articles">
              <div class="head_img fl">
                  <img v-bind:src="item.userId.headerImg|filterHeader" alt="" v-if="item.userId.headerImg">
                  <i class="iconfont" v-else>&#xe638;</i>
              </div>
              <div class="content fl">
                  <div class="one">
                      <router-link v-bind:to="'/personHome/'+item.userId._id" tag="a"  class="username bule">{{item.userId.username}}</router-link>
                      <span class="time">{{item.createdAt|filterDate}}</span>
                      <span class="reader">{{item.readers}}次阅读</span>
                      <span class=" label">{{item.articleClass}}</span>
                  </div>
                  <router-link v-bind:to="'/articleDetail/'+item._id" tag="a">
                      <h4 class="title">{{item.articleTitle}}</h4>
                        <!-- <div class="introduction" v-html="item.articleContent">
                            {{item.articleContent}}<span class="bule">【阅读全文】</span></p>
                        </div> -->
                  </router-link>
                  <div class="operation" v-if="islogin">
                        <span class="like">
                          <i class="iconfont pointer"  @click="giveLikeFun" v-bind:articleId="item._id" v-bind:index="index" v-bind:class="{bule:isLike[index]}">&#xe641;</i>
                          <span>{{item.giveLikes.length}}</span>
                          <span>个赞</span>
                        </span>
                        <span class=" collection">
                            <i  @click="giveCollectionFun" v-bind:articleId="item._id" v-bind:index="index" v-bind:class="{green:isCollection[index]}" class=" iconfont pointer" >&#xe667;</i>
                            <span>{{item.collections.length}}</span>
                            <span>个收藏</span>
                        </span>
                        <span class="comment">
                            <i class=" iconfont">&#xe628;</i>
                            <router-link v-bind:to="'/articleDetail/'+item._id+'#comment'" tag="a">
                                <span>{{item.commentContents.length}}</span>
                                <span>条评论</span>
                            </router-link>
                        </span>
                  </div>     
              </div>
          </div>
      </div>
      <div class="right">
          <hot_user></hot_user>
          <my_label for=""></my_label>
      </div>
  </div>
</div>
</template>
<script>
var pages = 0;
import axios from 'axios'
import myAttentionVue from './myAttention.vue';
import Label from './Label'
import HotUser from './HotUser'
import dateformat from '../../assets/js/dateformat.js'
import filterHeader from '../../assets/js/filterHeaderImg.js'
import giveLikeCollection from "../../assets/js/giveLikeCollection"
import scroll from '../../assets/js/scroll'
    export default{
        data(){
            return{
                articles:[],
                isLike:[],
                isCollection:[],
                articleCount:0,
                dataClass:'',
                oNav:[true,false,false,false,false,false]                 
            }
        },
        created:function(){
            this.$store.dispatch('isloging');
            this.$store.commit('ISNAVHEAD',true)
            this.getHomeArticle();
        },
        mounted:function(){
            this.loadinFun(this,this.getHomeArticle)
        },
        computed:{
            islogin:function(){
                return this.$store.state.isLoging
            }
        },
        components:{
            "my_attention":myAttentionVue,
            'my_label':Label,
            'hot_user':HotUser
        },
        methods:{
            // 活动下拉加载数据
            loadinFun:function(_this,callback){
                var that = _this;
                window.onscroll = function(){             
                　　if(scroll.getScrollTop() + scroll.getWindowHeight() == scroll.getScrollHeight()&&scroll.getScrollTop()>=1080){
                        var b = that.articleCount%10===0?0:1
                        var a = parseInt(that.articleCount/10)+b;
                        if(pages<a){
                            pages++;
                            callback();
                        }           　　　　
                　　}
                }
            },
            // 点击喜欢
            giveLikeFun:function(e){
                giveLikeCollection(e,'/api/article/giveLike','/api/article/delLike',this.isLike,this,this.getHomeArticle)
            },
            // 点击收藏
             giveCollectionFun:function(e){
                 giveLikeCollection(e,'/api/article/giveCollection','/api/article/delCollection',this.isCollection,this,this.getHomeArticle)
            },
            // 过滤函数喜欢或收藏的列表中是否存在用户名，来确定用户是否已经点过收藏和喜欢
            filterName:function(value){
                return value.userName===this.$store.state.userName
            },
            getClassFun:function(e){
                pages=0;
                var index = e?e.target.getAttribute('index'):0;
                this.oNav = [false,false,false,false,false,false];
                this.$set(this.oNav,index,true);
                this.articles=[];
                this.dataClass = e.target.getAttribute('dataClass')
                this.getHomeArticle();
            },
            // 获取文章列表
            getHomeArticle:function(){
               
                var that = this; 
                this.articles=[];              
                axios.get('api/article/homeHotArticle',{
                    params:{
                        page:pages,
                        articleClass:this.dataClass
                    }
                }).then(function(res){
                    that.articleCount = res.data.count;

                    for(var i=0; i<res.data.articles.length;i++){
                        that.articles.push(res.data.articles[i])
                    }
                    for(var i=0; i<that.articles.length; i++){
                        that.$set(that.isLike,i,that.articles[i].giveLikes.filter(that.filterName)[0]?true:false);
                        that.$set(that.isCollection,i,that.articles[i].collections.filter(that.filterName)[0]?true:false);
                    }
                });
                
            }
        },
        filters:{
            filterDate:dateformat,
            filterHeader:filterHeader
        }
    }
    
</script>
<style lang="scss" src="../../assets/css/index.scss">

</style>

